import React from 'react';
import { StyledOption, StyledSelect } from './Select.styled';
import { TSelectProps } from './Select.types';

/**
 * @function Select - Компонент поля с выпадающим списком.
 * @param {React.Ref<HTMLSelectElement>} ref - Ссылка на HTML-элемент "select" в компоненте.
 * @param {TSelectProps} nextProps - Дополнительные свойства для компонента "Select".
 * @param {Array<string>} option - Опции в выпадающем списке.
 */
const Select = React.forwardRef<HTMLSelectElement, TSelectProps>(({ options, ...nextProps }, ref) => (
  <StyledSelect ref={ref} {...nextProps}>
    {options?.map(item => (
      <StyledOption key={item.value}>{item.label}</StyledOption>
    ))}
  </StyledSelect>
));

Select.displayName = 'Select';

export default Select;
